<dom-module id="ve-relative">
    <template>
        <style>
            /* set width and min-width at the same time to make size unchanged */
            
            ve-input {
                flex: "1";
            }
            
            ve-input::shadow #input {
                padding: 2px;
            }
            
            span.space {
                flex: none;
                height: 6px
            }
            
            h-checkbox {
                min-width: 30px;
                max-width: 30px;
            }
        </style>

        <div class="layout horizontal center">
            <ve-checkbox class="h-checkbox" path="{{path}}.checkTop" value="{{value.isAlignTop}}" on-value-changed="_onTopChecked">Top</ve-checkbox>
            <ve-input id="top_input" class="flex-1" value="{{value.top}}" path="{{path}}.top" hidden="{{!_is(value.isAlignTop)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignVerticalCenter}}" path="{{path}}.checkVertical" on-value-changed="_onVerticalCenterChecked">VCenter</ve-checkbox>
            <ve-input id="vertical_input" class="bottom-input flex-1" value="{{value.vertical}}" path="{{path}}.vertical" hidden="{{!_is(value.isAlignVerticalCenter)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox class="h-checkbox" path="{{path}}.checkBottom" value="{{value.isAlignBottom}}" on-value-changed="_onBottomChecked">Bottom</ve-checkbox>
            <ve-input id="bottom_input" value="{{value.bottom}}" path="{{path}}.bottom" hidden="{{!_is(value.isAlignBottom)}}"></ve-input>
        </div>

        <span class="space"></span>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignLeft}}" path="{{path}}.checkLeft" on-value-changed="_onLeftChecked">Left</ve-checkbox>
            <ve-input id="left_input" class="bottom-input" value="{{value.left}}" path="{{path}}.left" hidden="{{!_is(value.isAlignLeft)}}"></ve-input>
        </div>

        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignHorizontalCenter}}" path="{{path}}.checkHorizontal" on-value-changed="_onHorizontalCenterChecked">HCenter</ve-checkbox>
            <ve-input id="horizontal_input" class="bottom-input" value="{{value.horizontal}}" path="{{path}}.horizontal" hidden="{{!_is(value.isAlignHorizontalCenter)}}"></ve-input>
        </div>


        <div class="layout horizontal center">
            <ve-checkbox value="{{value.isAlignRight}}" path="{{path}}.checkRight" on-value-changed="_onRightChecked">Right</ve-checkbox>
            <ve-input id="right_input" class="bottom-input" value="{{value.right}}" path="{{path}}.right" hidden="{{!_is(value.isAlignRight)}}"></ve-input>
        </div>
    </template>
    <script>
        (() => {
            "use strict";
            Polymer({
                properties: {
                    value: {
                        type: Object,
                        value: {},
                        notify: true
                    }
                },

                ready: function() {
                    this._isReady = true;
                },

                _is: function(t) {
                    return !!t
                },

                _onTopChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value == true) {
                        this.set("value.isAlignVerticalCenter", false)
                        this.$.top_input.confirm();
                    }
                },
                _onLeftChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value == true) {
                        this.set("value.isAlignHorizontalCenter", false)
                        this.$.left_input.confirm();
                    }
                },
                _onRightChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value == true) {
                        this.set("value.isAlignHorizontalCenter", false)
                        this.$.right_input.confirm();
                    }
                },
                _onBottomChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value == true) {
                        this.set("value.isAlignVerticalCenter", false)
                        this.$.bottom_input.confirm();
                    }
                },
                _onHorizontalCenterChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value) {
                        this.set("value.isAlignLeft", false);
                        this.set("value.isAlignRight", false);
                        this.$.horizontal_input.confirm();
                    }
                },
                _onVerticalCenterChecked: function(t, e) {
                    if (!this._isReady) {
                        return;
                    }
                    if (e.value) {
                        this.set("value.isAlignTop", false);
                        this.set("value.isAlignBottom", false);
                        this.$.vertical_input.confirm();
                    }
                }
            });
        })();
    </script>
</dom-module>